<template>
    <div class="media-recorder">
        <nav-header>
            <div class="zh-h5-nav" style="position :absolute; z-index:100000000000000">
            <div
              :class="activePanel === 'push-recorder' ? 'active' : ''"
              @click="changePanel('push-recorder')">推流设备</div>
            <div
              :class="activePanel === 'pull-recorder' ? 'active' : ''"
              @click="changePanel('pull-recorder')">拉流设备</div>
          </div>
        </nav-header>
        <transition name="fade" mode="out-in" v-if="activePanel === 'push-recorder'" >
            <zh-push-recorder />
        </transition>
        <transition name="fade" mode="out-in" v-if="activePanel === 'pull-recorder'" >
            <zh-pull-recorder />
        </transition>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activePanel: 'push-recorder',
            }
        },
      methods: {
            changePanel(panel) {
              this.activePanel  = panel;
            },
        },
    }
</script>
<style lang="scss">
    .media-recorder {
        .zh-h5-nav {
            .active {
                color: #fff;
            }
        }
        .zh-h5-nav > div {
            display: inline-block;
            height: 26px;
            line-height: 26px;
            margin-right: 10px;
            padding: 0 10px;
            cursor: pointer;
        }
    }
</style>
